<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8" />
		<title>Jay Skript And The Domsters</title>
		<style type="text/css">
			* {
				border: none;
				margin: 0px;
				padding: 0px;
			}

			/* 	.number {
				padding: 36px 0 28px;
				width: 400px;
				margin: auto
			} */

			.mui-numbox {
				display: inline-block;
			}

			.minus {
				width: 30px;
				height: 30px;
				text-align: center;
				border: solid 1px #eaeaea;
				background: #f5f5f5;
				color: #9e9e9e;
			}

			.numbox {
				border-top: solid 1px #eaeaea;
				border-bottom: solid 1px #eaeaea;
				height: 28px;
				width: 60px;
				color: #333333;
				margin-left: -8px;
				text-align: center;
				background: transparent;
			}

			.numbox::textfield-decoration-container {}

			.numbox::-webkit-inner-spin-button {
				-webkit-appearance: none;
			}

			.numbox::-webkit-outer-spin-button {
				-webkit-appearance: none;
				/* 有无看不出差别 */
			}

			.plus {
				margin-left: -8px;
			}
		</style>
	</head>
	<body>
		<div class="number">
			购买数量:
			<div class="mui-numbox">
				<button id="" class="minus" type="button" οnclick="opera('val',false);">-</button>
				<input class="numbox" type="number" id="val" value="0" />
				<button class="minus plus" type="button" οnclick="opera('val',true);">+</button>
				人次
			</div>
	</body>
</html>
<script type="text/javascript">
	function opera(x, y) {
		debugger;
		var rs = new Number(document.getElementById(x).value);
		if (y) {
			document.getElementById(x).value = rs + 1;
		} else if (rs > 0) {
			document.getElementById(x).value = rs - 1;
		}

	}
</script>
